<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距？所有元素都具备边框以外距离，四个，上下，左右
			   外边距问题1 行内元素 a i delete...只支持左右边距
			              布局 支持左右推动效果
						  解决方案  行转块！
				常用margin属性 两个属性值 margin：0  auto；居中
		 */
		 h1{
			 width: 50%;
			 border: 1px solid red;
			 /*  margin外边距属性：1个属性值 上  右  下  左*/
			 margin: 300px;  /* #？  上下 左右   上下效果没有  ？ */
			 /*  margin外边距属性：2个属性值 上下  左右*/
			 margin: 100px 200px;
			  /*  margin外边距属性：3个属性值 上  左右  下*/
			  margin: 100px 200px 300px;
			   /*  margin外边距属性：4个属性值 上  右  下  左*/
			   margin: 100px 200px 300px 400px;
			   /* 常用属性：自适应居中 */
			   margin: 0 auto;
		 }
		 /* 外边距问题2  外边距合并问题 
		 上下元素都存在外边距 垂直以最大外边距值为主
		 外边距垂直合并：最大外边距为主，怎么解决？
		 推荐：1.margin设置1个值，上下会垂直，去掉一个上下元素中上下外边距之一，重新计算
		      2.padding代替margin*/
		 #parent{
			 width: 200px;
			 height: 200px;
			 background: lightblue;
			 margin-top: 30px;
			 bord er:1px solid transparent;
			 /* 父元素：加border：1px solid transparent */
			 /* 父元素：overflow：hidden;创建新块级上下文，阻止外边框合并 */
			 overflow:hidden;
		 }
		 #child{
			  margin-top: 30px;
			 width: 100px;
			 height: 100px;
			 background: red;
		 }
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
		     <div id="child"></div>
		</div>
		<hr>
		<!-- 元素：存在于框模型中=外边距+边框+内边距+内容
		 有些元素默认外边距 处理方案：统配选择器，去掉元素外边距
		 -->
		<span>行内元素</span>
		<h1>块元素</h1>
		<table>
			<tr>
				<td></td>
			</tr>
		</table>
	</body>
</html>

<!--  测是否存在外边距？
      ul li                √
      form input           ×
	  table tr td          ×
	  p                    √ -->